﻿@page "/components/swipetrap"

<PageOutlet Url="components/swipetrap"
            Title="SwipeTrap"
            Description="swipetrap component of the bit BlazorUI components" />

<div>
    <DemoPage Name="SwipeTrap"
              Description="A SwipeTrap is a component that traps swipe actions and triggers corresponding events."
              Parameters="componentParameters"
              SubClasses="componentSubClasses"
              SubEnums="componentSubEnums"
              GitHubUrl="Utilities/SwipeTrap/BitSwipeTrap.razor"
              GitHubDemoUrl="Utilities/SwipeTrap/BitSwipeTrapDemo.razor">
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
            <div>Try swipe or drag on the container:</div><br />
            <BitSwipeTrap Style="width:100%"
                          OnStart="HandleOnStartBasic"
                          OnMove="HandleOnMoveBasic"
                          OnEnd="HandleOnEndBasic"
                          OnTrigger="HandleOnTriggerBasic">
                <div class="basic-container">
                    <div>StartX: @swipeTrapEventArgsBasic?.StartX</div>
                    <div>StartY: @swipeTrapEventArgsBasic?.StartY</div>
                    <div>DiffX: @swipeTrapEventArgsBasic?.DiffX</div>
                    <div>DiffY: @swipeTrapEventArgsBasic?.DiffY</div>
                    <div>---</div>
                    <div>Triggered? @isTriggeredBasic</div>
                    <div>Trigger direction: <b>@swipeTrapTriggerArgsBasic?.Direction</b></div>
                    <div>Trigger diffX: @swipeTrapTriggerArgsBasic?.DiffX</div>
                    <div>Trigger diffY: @swipeTrapTriggerArgsBasic?.DiffY</div>
                </div>
            </BitSwipeTrap>
        </DemoExample>

        <DemoExample Title="Panel" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
            <div>Open the panel and try to close it by swiping it to the left:</div><br />
            <div class="panel-container">
                <button @onclick="OpenPanel">
                    Open
                </button>
                <div class="panel@(isPanelOpen ? " open": "")" style="@GetPanelStyle()">
                    <button @onclick="ClosePanel" style="position:absolute;top:0;right:0">
                        Close
                    </button>
                    <BitSwipeTrap Style="width:100%;height:100%"
                                  OnMove="HandleOnMovePanel"
                                  OnEnd="HandleOnEndPanel"
                                  OnTrigger="HandleOnTriggerPanel">
                        <div class="panel-trap">
                            <h3>Title</h3>
                            <div>Item1</div>
                            <div>Item2</div>
                            <div>Item3</div>
                        </div>
                    </BitSwipeTrap>
                </div>
            </div>
        </DemoExample>

        <DemoExample Title="List" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <div>Swipe each row to the right to trigger the delete action:</div><br />
            <div class="list-container">
                @foreach (int idx in itemsList)
                {
                    var i = idx;
                    <div @key="@i" class="row">
                        <div class="delete">Delete</div>
                        <BitSwipeTrap Style="width:100%;height:100%"
                                      Trigger="60m"
                                      Threshold="10"
                                      OnMove="args => HandleOnMoveList(args, i)"
                                      OnEnd="args => HandleOnEndList(args, i)"
                                      OnTrigger="args => HandleOnTriggerList(args, i)">
                            <div class="row-trap" style="@GetRowStyle(i)">
                                <div>Item@(i + 1)</div>
                            </div>
                        </BitSwipeTrap>
                    </div>
                }
            </div>
            <br />
            <BitButton OnClick="ResetList">Reset</BitButton>
            <BitDialog @bind-IsOpen="isListDialogOpen"
                       Title="Delete item?"
                       Message="Are you sure you want to delete this item?"
                       OnOk="HandleOnOkList"
                       OnCancel="HandleOnCancelList" />
        </DemoExample>

        <DemoExample Title="Advanced" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
            <div>An illustrative example of integrating this component into a straightforward mobile application.</div>
            <br />
            <div class="mobile-frame">
                <div class="screen">
                    <div class="layout">
                        <div class="header">
                            <BitImage Src="/_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo.svg" Width="50" />
                            <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                                bit BlazorUI
                            </BitText>
                        </div>
                        <div class="main">
                            <BitSwipeTrap Style="width:100%;height:100%"
                                          OnMove="HandleOnMovePanelAdvanced"
                                          OnEnd="HandleOnEndPanelAdvanced"
                                          OnTrigger="HandleOnTriggerPanelAdvanced">
                                <div class="main-text">
                                    <BitText Style="user-select:none"
                                             Typography="BitTypography.H4"
                                             Color="BitColor.SecondaryBackground">
                                        Swipe left or right
                                    </BitText>
                                </div>

                                <div class="panel left" style="@GetLeftPanelAdvancedStyle()">
                                    <div class="panel-trap">
                                        <h3>Left Menu</h3>
                                        <div>Item1</div>
                                        <div>Item2</div>
                                        <div>Item3</div>
                                    </div>
                                </div>
                                <div class="panel right" style="@GetRightPanelAdvancedStyle()">
                                    <div class="panel-trap">
                                        <h3>Right Menu</h3>
                                        <div>Item1</div>
                                        <div>Item2</div>
                                        <div>Item3</div>
                                    </div>
                                </div>
                            </BitSwipeTrap>
                        </div>
                    </div>
                </div>
            </div>
        </DemoExample>
    </DemoPage>
</div>